<style>
.el-table .warning-row {
  background: #00fa9a;
}
.el-table .don-row {
  background: #ffc125;
}
.el-table .success-row {
  background: #f0f9eb;
}
</style>
<template>
  <div class="demo-app">
    <el-row style="padding-top: 20px;">
      <el-col :span="4">
        <el-button-group>
          <el-button :loading="up" @click="lastWeek" type="primary" icon="el-icon-arrow-left">上一周</el-button>
          <el-button
            :loading="down"
            @click="nextWeek"
            type="primary"
            icon="el-icon-arrow-right el-icon--right"
          >下一周</el-button>
        </el-button-group>
      </el-col>
      <el-col :span="5" :offset="1">
        <el-select @change="userClick" v-model="userId" filterable placeholder="请选择项目组员">
          <el-option
            v-for="item in userData"
            :key="item.userId"
            :label="item.userName"
            :value="item.userId"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="12" :offset="2">
        <el-alert center title="红色日期(员工已填报对应计划)不可修改喔" type="success" close-text="知道了"></el-alert>
      </el-col>
    </el-row>
    <el-row style="padding-top: 20px;">
      <el-col>
        <el-link icon="el-icon-download" target="_blank" :href="exportDown()">下载模板</el-link>
        <el-link
          style="margin-left: 10px;"
          icon="el-icon-upload2"
          @click="flagExportVisible=true"
        >按模板导入</el-link>
        <el-link @click="log()" icon="el-icon-document" style="margin-left: 10px;">导入记录</el-link>
      </el-col>
    </el-row>
    <el-table
      style="width: 100%;padding-top: 20px;"
      v-loading="loading"
      element-loading-text="加载中..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :data="tableData"
    >
      <template v-slot:empty>
        <el-empty description="请先选择项目组员"></el-empty>
      </template>
      <el-table-column label="日期" width="180" align="center">
        <template slot-scope="scope">
          <font
            :style="scope.row.isAllowEdit === 0?'font-size: 20px;color: red;':'font-size: 20px;color: blue;'"
          >
            <i class="el-icon-date">
              <b>{{scope.row.planDate}}</b>
            </i>
          </font>
          <span :hidden="scope.row.planDate != now3">
            <br />
            <font style="size: 15;padding-left: 50px;color: deepskyblue;font-size: 17px;">
              <b>(今天)</b>
            </font>
          </span>
          <span>
            <br />
            <font
              style="padding-left: 40px;font-size: 16px;color: green;"
            >星期{{"日一二三四五六".charAt(new Date(scope.row.planDate).getDay())}}</font>
          </span>
        </template>
      </el-table-column>

      <el-table-column label="工作事项" width="200" align="center">
        <template slot-scope="scope">
          <el-select
            :disabled="scope.row.isAllowEdit == 0"
            v-model="scope.row.workType"
            filterable
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in workTypeDate"
              :key="item.menuId"
              :label="'['+item.name+']'+item.plan"
              :value="item.menuId"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="计划工作内容" align="center">
        <template slot-scope="scope">
          <el-input
            :disabled="scope.row.isAllowEdit == 0"
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 6}"
            placeholder="请输入内容"
            v-model="scope.row.planTask"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            :hidden="scope.row.planId ==null || scope.row.isAllowEdit == 0"
            type="danger"
            @click="deleteClick(scope.row)"
            size="small"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row v-if="status!='close'" style="padding-top: 20px;">
      <el-col :offset="11" :span="2">
        <el-button :loading="substr" icon="el-icon-top" @click="submit" type="primary" round>提交</el-button>
      </el-col>
    </el-row>
    <el-divider>
      <i class="el-icon-s-open"></i>工作事项和计划工作内容都不为空才会保存！
    </el-divider>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="按计划模板导入"
      :visible.sync="flagExportVisible"
      width="30%"
      :append-to-body="true"
      @close="exportClose"
      center
    >
      <!-- <el-input type="file" v-model="file"></el-input> -->
      <input type="file" ref="feedbakcfile" @change="getFile($event)" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="flagExportVisible = false">取 消</el-button>
        <el-button type="primary" @click="exportUp">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="导入记录"
      destroy-on-close
      :visible.sync="logVisible"
      width="70%"
      :append-to-body="true"
      center
    >
      <el-table :data="logtableData" style="width: 100%">
        <template v-slot:empty>
          <el-empty description="暂无导入记录"></el-empty>
        </template>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="导入数据记录">
                <span v-html="props.row.log"></span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="导入时间" prop="createdDate"></el-table-column>
        <el-table-column label="创建人" prop="createdUserName"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import _ from "lodash";
import request from "@/utils/request";
import Controller from "@/libs/framework/controller";
export default class Instance extends Controller {
  mixin() {
    return {
      components: {},
      created() {
        this.status = this.$attrs.status;
        this.projectId = this.$attrs.projectId;
        if (this.$attrs.hasOwnProperty("userId")) {
          this.userId = this.$attrs.userId;
          this.getData(this.now, this.projectId, this.userId);
        }
        this.getSelectData();
      },
      data: function () {
        return {
          file: "",
          flagExportVisible: false,
          logVisible: false,
          logtableData: null,
          status: null,
          workTypeDate: null,
          userId: "",
          projectId: null,
          userData: null,
          loading: false,
          //当前时间,作为分页的条件
          now: new Date(),
          //区分
          now2: new Date(),
          now3: formatter.formatDate(new Date()),
          //表格数据
          tableData: null,
          //按钮状态
          up: false,
          down: false,
          substr: false,
        };
      },
      methods: {
        log() {
          request({
            url: "/eip/excel/getLog",
            method: "get",
            params: { projectId: this.projectId },
          })
            .then((r) => {
              this.logtableData = r.data;
            })
            .catch((e) => {
              this.notifyError((e || {}).message);
            });
          this.logVisible = true;
        },
        exportClose() {
          this.file = "";
          this.$refs.feedbakcfile.value = "";
        },
        getFile(event) {
          this.file = event.target.files[0];
        },
        formatJson(filterVal, jsonData) {
          return jsonData.map((v) => filterVal.map((j) => v[j]));
        },
        exportDown() {
          var projectId = this.projectId;
          return `${process.env.VUE_APP_BASE_API}/eip/excel/export?projectId=${projectId}`;
        },
        exportUp() {
          if (!this.file) {
            this.notifyError("请选择文件上传");
            return;
          }
          let formData = new FormData();
          formData.append("file", this.file);
          formData.append("projectId", this.projectId);
          request({
            url: "/eip/excel/read",
            method: "post",
            data: formData,
            header: { "Content-Type": "multipart/form-data" },
          })
            .then((r) => {
              if (r.success) {
                this.notifySuccess("导入成功");
                if (this.userId != "") {
                  this.getData(this.now, this.projectId, this.userId);
                }
                this.flagExportVisible = false;
              } else {
                this.$message.error(r.message);
                this.$refs.feedbakcfile.value = "";
                this.file = "";
              }
            })
            .catch((e) => {
              this.notifyError((e || {}).message || "导入失败");
            });
        },
        deleteClick(val) {
          this.$confirm("确定删除吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              request({
                url: "/eip/plan/deletePlan",
                method: "get",
                params: { planId: val.planId },
              })
                .then((r) => {
                  if (r && !r.initMessage) {
                    if (r.success == true) {
                      this.$message({
                        message: "删除成功！",
                        type: "success",
                      });
                      this.getData(this.now, this.projectId, this.userId);
                    } else {
                      this.$message.error(r.message);
                    }
                  } else {
                    this.$message.error(r.initMessage || "数据请求失败");
                  }
                })
                .catch((e) => {
                  reject(e);
                });
            })
            .catch(() => {});
        },
        userClick(val) {
          this.getData(this.now, this.projectId, val);
        },
        //获取下拉资源
        getSelectData() {
          request({
            url: "/eip/plan/getSelect",
            method: "get",
            params: {
              projectId: this.projectId,
            },
          })
            .then((r) => {
              if (r && !r.initMessage) {
                this.userData = r.parameters.users;
                this.workTypeDate = r.parameters.outlines;
              } else {
                this.$message.error(r.initMessage || "数据请求失败");
              }
            })
            .catch((e) => {
              reject(e);
            });
        },
        //根据当前时间获取上下周的信息
        getData(now, projectId, userId) {
          this.loading = true;
          //格式化
          now = formatter.formatDateTime(now);
          request({
            url: "/eip/plan/getPlans",
            method: "get",
            params: {
              time: now,
              projectId: projectId,
              userId: userId,
            },
          })
            .then((r) => {
              if (r && !r.initMessage) {
                if (r.success) {
                  this.tableData = r.parameters.plans;
                  this.up = false;
                  this.dowm = false;
                  this.loading = false;
                } else {
                  this.$message.error(r.message);
                }
              } else {
                this.$message.error(r.initMessage || "数据请求失败");
              }
            })
            .catch((e) => {
              reject(e);
            });
        },
        lastWeek() {
          this.up = true;
          let time = this.now;
          let dateTime = time.setDate(time.getDate() - 7);
          this.now = new Date(dateTime);
          this.getData(this.now, this.projectId, this.userId);
        },
        nextWeek() {
          this.dowm = true;
          let time = this.now;
          let dateTime = time.setDate(time.getDate() + 7);
          this.now = new Date(dateTime);
          this.getData(this.now, this.projectId, this.userId);
        },
        submit() {
          this.substr = true;
          var deep = _.cloneDeep(this.tableData);
          var can = _.filter(deep, function (o) {
            return (
              (o.workType == null || o.workType == "") &&
              o.planTask != null &&
              o.planTask != ""
            );
          });
          var can2 = _.filter(deep, function (o) {
            return (
              o.workType != null &&
              o.workType != "" &&
              (o.planTask == null || o.planTask == "")
            );
          });
          if (can.length > 0 || can2.length > 0) {
            this.$message.error(
              "请补充表格数据,不能只填写工作事项或工作内容！"
            );
            this.substr = false;
            return;
          }
          request({
            url: "/eip/plan/saveWeekPlans",
            method: "post",
            data: { plans: this.tableData },
          })
            .then((r) => {
              if (r && !r.initMessage) {
                this.substr = false;
                if (r.success == true) {
                  this.$message({
                    message: "保存成功！",
                    type: "success",
                  });
                } else {
                  this.$message.error("保存失败！");
                }
                this.getData(this.now, this.projectId, this.userId);
              } else {
                this.$message.error(r.initMessage || "数据请求失败");
              }
            })
            .catch((e) => {
              reject(e);
            });
        },
      },
    };
  }
}
</script>
 